import React, { Component } from 'react'
import product from '../../../img1/comment1.png'
import { Rate } from 'antd';
import { Input } from 'antd';
import { Upload, Modal } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
const { TextArea } = Input;
export default class comment extends Component {
    render() {
        return (
            <div className="comment">
                <div className="comment-t">
                    评价
                </div>
                <div className="comment-c">
                    <div className="comment-c-l">
                        <img src={product} alt=""/>
                        <p>鸡你太美防晒霜</p>
                    </div>
                    <div className="comment-c-r">
                        <p>商品打分&nbsp;&nbsp;<Rate style={{color:'#ec6a17'}}/></p>
                        <p>服务态度&nbsp;&nbsp; <Rate style={{color:'#ec6a17'}}/></p>
                        <p>相关描述&nbsp;&nbsp; <Rate style={{color:'#ec6a17'}}/></p>
                        <TextArea placeholder="宝贝真的好吗？来分享你的感受" showCount maxLength={500} />
                        <PicturesWall></PicturesWall>
                        <button>发表评论</button>
                    </div>
                </div>
            </div>
        )
    }
}
function getBase64(file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
class PicturesWall extends React.Component {
    state = {
      previewVisible: false,
      previewImage: '',
      previewTitle: '',
      fileList: [
        {
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-2',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        },
        {
          uid: '-3',
          name: 'image.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        }
      ],
    };
  
    handleCancel = () => this.setState({ previewVisible: false });
  
    handlePreview = async file => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
  
      this.setState({
        previewImage: file.url || file.preview,
        previewVisible: true,
        previewTitle: file.name || file.url.substring(file.url.lastIndexOf('/') + 1),
      });
    };
  
    handleChange = ({ fileList }) => this.setState({ fileList });
  
    render() {
      const { previewVisible, previewImage, fileList, previewTitle } = this.state;
      const uploadButton = (
        <div>
          <PlusOutlined />
        </div>
      );
      return (
        <>
          <Upload
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            listType="picture-card"
            fileList={fileList}
            onPreview={this.handlePreview}
            onChange={this.handleChange}
          >
            {fileList.length >= 4 ? null : uploadButton}
          </Upload>
          <Modal
            visible={previewVisible}
            title={previewTitle}
            footer={null}
            onCancel={this.handleCancel}
          >
            <img alt="example" style={{ width: '100%' }} src={previewImage} />
          </Modal>
        </>
      );
    }
  }